<template>
    <div>
        <van-cell
            icon="search"
            v-for="(item, index) in searchSuggestions"
            :key="index"
            @click="$emit('search', item)"
        >
            <div slot="title" v-html="highLight(item)"></div>
        </van-cell>
    </div>
</template>

<script>
import { debounce } from 'lodash'
import { getSearchSuggestion } from '@/api/search'
export default {
    components: {},
    props: {
        searchText: {
            type: String,
            required: true
        }
    },
    data () {
        return {
            // 搜索联想建议
            searchSuggestions: []
        }
    },
    created () { },
    methods: {
        // 搜索关键词高亮
        highLight (str) {
            // RegExp 正则表达式的构造函数
            // 参数1：字符串  参数2：匹配模式  返回值：正则对象
            return str.replace(
                new RegExp(this.searchText, 'gi'),
                `<span style='color:red'>${this.searchText}</span>`
            )
        }
    },
    watch: {
        // searchText () {
        //     console.log('hello');
        // }
        // 监视的完整写法
        // debounce 防抖函数
        // 参数1：函数  参数2：时间  返回值：防抖处理的函数
        searchText: {
            handler: debounce(async function () {
                const { data: res } = await getSearchSuggestion(this.searchText)
                // console.log(res);
                this.searchSuggestions = res.data.options
            }, 300),
            // 该回调会在侦听开始之后被立即调用
            immediate: true
        }
    }
}
</script>

<style scoped>
</style>
